<template>
    <div class="menuDialog">
        <el-dialog
            title="新建菜单组"
            :visible.sync="menuDialog"
            width="1000px"
            top="10vh"
            :before-close="hideDialog">
            <div class="menuTitle">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="菜单组名称" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入名称，不超过6个字符"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="menuContent">
                <div class="menuLeftBox">
                    <p style="margin-bottom:8px">菜单下的服务（{{checkMenuList.length}}/12）</p>
                    
                    <ul class="menuAddList">
                        <vue-scroll
                        :ops="ops"
                    >
                        <li v-for="item in checkMenuList" :key="item.id">
                            {{item.name}}
                            <i class="iconfont icon-guanbi hoverColor" @click="deleteMenu(item)"></i>
                        </li>
                        </vue-scroll>
                    </ul>
                    
                </div>
                
                <div class="menuRightBox">
                    <vue-scroll
                        :ops="ops"
                    >
                    <ul class="oneUl">
                        <li class="oneMenu" v-for="item in menuTree" :key="item.id">
                            <span class="oneMenuSpan">{{item.children[0].name}}</span>
                            <ul class="twoUl">
                                <li class="twoMenu" v-for="itemTwo in item.children[0].children" :key="itemTwo.id">
                                    <span class="twoMenuSpan">{{itemTwo.name}}</span>
                                    <div>
                                        <el-checkbox-group v-model="checkedMenuIds" :max="12">
                                            <el-checkbox class="threeMenu" v-for="itemThree in itemTwo.children" :key="itemThree.id" :label="itemThree.id" :value="itemThree.id" @change="handleCheckedMenuChange(itemThree)" >{{itemThree.name}}</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    </vue-scroll>
                </div>
                
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" plain class="deleteMenu">删除此菜单组</el-button>
                <el-button @click="hideDialog">取 消</el-button>
                <el-button type="primary" @click="sureDialog">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('homeModule');
export default {
    name: 'MenuDialog',
    props:['menuDialog'],
    data () {
        return {
            ruleForm:{
                name:''
            },
            rules: {
                name: [
                    { required: true, message: '请输入菜单组名称', trigger: 'blur' },
                    { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
                ]},
            ops: {
                scrollPanel:{
                    scrollingX: false,//是否启用 x 或者 y 方向上的滚动 
                },
                rail: {
                    opacity: '0',
                },
                bar: {
                    onlyShowBarOnScroll: false,//当页面滚动时显示
                    keepShow: false,//是否一直显示
                    background: '#c6c6c6',
                    size: '3px',
                    right:0
                },
            },
            checkedMenuIds:[],
            checkMenuList:[],
        };
    },
    computed: {
        ...mapState([
            'menuTree',
        ]),
    },
    methods: {
        // 取消
        hideDialog(){
            this.$parent.addMenuHide();
        },
        // 确定
        sureDialog(){
            this.$parent.addMenuHide();
        },
        // 选中菜单
        handleCheckedMenuChange(item){
            let isHas = true;
            let index = 0;
            for(let i=0;i<this.checkMenuList.length;i++){
                if(this.checkMenuList[i].id.indexOf(item.id)>-1){
                    isHas = false;
                    index = i;
                    break;
                }
            }
            if(isHas){
                this.checkMenuList.push({
                    id:item.id,
                    name:item.name
                });
            }else{
                this.checkMenuList.splice(index,1);
            }
        },
        // 移除菜单
        deleteMenu(item){
            for(let i=0;i<this.checkMenuList.length;i++){
                if(this.checkMenuList[i].id.indexOf(item.id)>-1){
                    this.checkMenuList.splice(i,1);
                    return;
                }
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.menuDialog{
     .el-dialog__header{
        border-bottom: 1px solid #ccc;
    }
     .el-dialog__body{
        padding: 0!important;
    }
    .menuTitle{
        width: 400px;
        padding-top: 10px;
    }
    .menuContent{
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        height: 400px;
        
        .menuLeftBox{
            width: 200px;
            float: left;
            height: 390px;
            padding-left: 15px;
            padding-top: 10px;
            .menuAddList{
                height: 362px;
                padding-bottom: 8px;
                li{
                    width: 180px;
                    height: 28px;
                    line-height: 28px;
                    margin-bottom: 8px;
                    background: #e9edfb;
                    position: relative;
                    padding-left: 6px;
                    i{
                        position: absolute;
                        right: 6px;
                        font-size: 16px;
                        color: #000;
                        cursor: pointer;
                    }
                }
            }
        }
        .menuRightBox{
            width: 785px;
            background: #edeff6;
            height: 390px;
            display: inline-block;
            padding-bottom: 10px;
            .oneUl{
                margin-left: 16px;
                margin-top: 16px;
                .oneMenuSpan{
                    height: 22px;
                    line-height: 22px;
                    font-weight: 600;
                    color: #666;
                    margin-top: 10px;
                        display: inline-block;
                }
            }
            .twoUl{
                margin-left: 16px;
                .twoMenu{
                    .twoMenuSpan{
                        height: 28px;
                        line-height: 28px;
                        color: #333;
                        font-size: 16px;
                        margin-top: 10px;
                        display: inline-block;
                    }
                }
            }
            
            .threeMenu{
                display: inline-block;
                line-height: 20px;
                background: #fff;
                padding: 4px 10px;
                box-shadow: 0 2px 4px 0 rgba(182,187,205,0.4);
                margin-top: 6px;
            }
        }
    }
    .deleteMenu{
        position: absolute;
        left: 30px;
    }
}
</style>
